<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
            font-size: small;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app" style="width: 1900px;margin: 0 auto">
    <div style="margin: 20px 10px">
        角色名称:
        <el-input style="width: 500px;height: 32px" type="text" v-model="wd"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="replace()">重置</el-button>
    </div>
    <div style="margin: 20px 10px">
        <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增角色</el-button>
        <!--新增页面-->
        <el-dialog title="新增" :visible.sync="dialogFormVisible"><hr>
            <el-form :model="role">
                <el-form-item label="角色编码" :label-width="formLabelWidth">
                    <el-input v-model="role.coding" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="role.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="textarea">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关 闭</el-button>
                <el-button type="primary" @click="insert();dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-button type="primary" icon="el-icon-upload2">导入</el-button>
        <el-button type="primary" icon="el-icon-download">导出</el-button>
    </div>
    <div style="border:1px solid #409eff;background-color: rgba(64,158,255,0.1);margin:20px 10px;padding:12px 30px;color:#606266;border-radius: 5px;width: 1820px">
        已选择<a style="text-decoration: none;color:#409eff" href="javascript:void(0)">{{0}}</a>项
        <span style=" font-size: 15px; margin-left: 30px" >
                    <a style="text-decoration: none;color:#409eff" href="javascript:void(0)">清空</a>
            </span>
    </div>
    <div>
        <template>
            <el-table
                    :data="roles"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="a"
                        width="150" align="center">
                    <el-radio v-model="radio"></el-radio>
                </el-table-column>
                <el-table-column
                        prop="coding"
                        label="角色编码" align="center"
                        width="270">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="角色名称" align="center"
                        width="400">
                </el-table-column>
                <el-table-column
                        prop="created"
                        sortable
                        label="日期" align="center"
                        width="400">
                </el-table-column>
                <el-table-column
                        label="操作" align="center"
                        width="679">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">用户</el-button>
                        <el-button type="text" size="small">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item  ><a href="javascript:void (0)" @click="selectByPower()">授权</a></el-dropdown-item>

                                    <el-dropdown-item>
                                        <a href="javascript:void(0)" @click="selectRole(scope.row)">编辑</a>
                                    </el-dropdown-item>
                                    <el-dropdown-item><a href="javascript:void (0)" @click="roleDelete(scope.row)">删除</a></el-dropdown-item>
                                </el-dropdown-menu>
                                <!--编辑页面-->
                                <el-dialog title="编辑" :visible.sync="dialogFormVisibles"><hr>
                                    <el-form :model="arr">
                                        <el-form-item label="角色编码" :label-width="formLabelWidths">
                                            <el-input v-model="arr.coding" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="角色名称" :label-width="formLabelWidths">
                                            <el-input v-model="arr.name" autocomplete="off" ></el-input>
                                        </el-form-item>
                                        <el-form-item label="描述" :label-width="formLabelWidths">
                                            <el-input
                                                    type="textarea"
                                                    :rows="2"
                                                    placeholder="请输入内容"
                                                    v-model="textareas">
                                            </el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisibles = false">关 闭</el-button>
                                        <el-button type="primary"  @click="update(scope.row)">确 定</el-button>
                                    </div>
                                </el-dialog>
                                <!--授权列表-->
                                <el-drawer
                                        title="我是标题"
                                        :visible.sync="drawer"
                                        :with-header="false">
                                    <span>角色权限配置！</span><hr>
                                </el-drawer>
                            </el-dropdown>
                            </el-dropdown>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                input:"",
                roles:[],
                radio:"",
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                textarea:"",
                role:{},
                wd:"",
                dialogTableVisibles: false,
                dialogFormVisibles:false,
                formLabelWidths: '120px',
                textareas:"",
                arr:{},
                drawer:false,
                powerArr:{}
            }
        },
        methods:{
            handleClick(row) {
                console.log(row);
            },
            /*删除角色*/
            roleDelete(row){
                if(confirm("确定删除吗?")) {
                    axios.get("/role/deleteById?id=" + row.id).then(function () {
                        location.reload();
                    })
                }
            },
            /*重置*/
            replace(){
              v.wd="";
            },
            /*查询全部*/
            search(){
                axios.get("/role/selectByWd?wd="+v.wd).then(function (response) {
                    v.roles = response.data;
                    v.wd="";
                })
            },
            /*添加*/
            insert(){
                axios.post("/role/insert",v.role).then(function (response) {
                    alert("添加成功!!");
                    location.reload();
                })
            },
            /*修改角色信息*/
            update(row){
                v.dialogFormVisibles = false
                axios.post("/role/updateById",v.arr).then(function (response) {
                    location.reload()
                    v.arr={}
                })
            },
            /*查询角色信息*/
            selectRole(row){
                v.dialogFormVisibles = true
                axios.get("/role/selectRole?id="+row.id).then(function (response) {
                    v.arr=response.data;
                })
            },
            /*查询权限*/
            selectByPower(){
                v.drawer = true
                axios.get("/role/selectByPower").then(function (response) {
                    v.powerArr=response.data;
                })
            }
        },
        created:function (){
            axios.post("/role/select").then(function (response) {
                v.roles = response.data;
            })
        }
    })
</script>
</html>